<script setup>
import { uploadPicAPI } from "@/apis/form";
import { onMounted, ref } from "vue";

const upload = ref();
const imgPath = ref("");
const file = ref();

onMounted(() => {
  upload.value.addEventListener("change", (e) => {
    file.value = e.target.files[0];
    imgPath.value = URL.createObjectURL(file.value);
  });
});

const submitPic = async () => {
  const formData = new FormData();
  formData.append("file", file.value);
  const res = await uploadPicAPI(formData);
};
</script>

<template>
  <div class="index">upload</div>
  <img :src="imgPath" alt="" />
  <input type="file" ref="upload" />
  <button @click="submitPic">提交图片</button>
</template>

<style lang="scss" scoped>
img {
  width: 100px;
  height: 100px;
  object-fit: fill;
}
</style>
